<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="content-type" content="text/html;charset=utf-8" />
    
    <title>Captcha Sample</title>
    
    <style type="text/css">
    div
    {
        width: 600px;
        margin: 50px auto;
    }
    
    input[type=text]
    {
        width: 280px;
        height: 18px;
        color: #333333;
        font: 14px Arial, sans-serif;
        border: 1px solid #888888;
        border-radius: 5px;
        background: #f8f8f8;
        padding-left: 5px;
        padding-right: 5px;
    }
    
    input[type=button]
    {
        width: 290px;
        height: 25px;
        color: #ececec;
        font: bold 14px Arial, sans-serif;
        border: none;
        border-radius: 9px;
        background: #bf0000;
        margin-top: 10px;
        cursor: pointer;
    }
    
    input[type=button]:hover
    {
        color: #bf0000;
        border: 1px solid #bf0000;
        background: #ececec;
    }
    
    img
    {
        float: left;
        cursor: pointer;
        display: block;
    }
    
    p
    {
        float: left;
        padding: 0 0;
        margin: 0 20px;
        display: block;
    }
    </style>
    
    <script type="text/javascript">
    function $(id)
    {
        return document.getElementById(id);
    }
    
    function refreshCaptcha()
    {
        var url = $('captchaImage').src;
        url = url.replace(/\?\d+$/, '');
        $('captchaImage').src = url + '?' + (new Date()).getTime();
        $('captcha').value = '验证码已更新';
    }
    
    function compareCaptcha()
    {
        var xhr = null;
        
        if (window.XMLHttpRequest)
        {
            xhr = new XMLHttpRequest();
        }
        else
        {
            xhr = new ActiveXObject('Microsoft.XMLHTTP');
        }
        
        xhr.onreadystatechange = function()
        {
            if (xhr.readyState == 4 && xhr.status == 200)
            {
                $('captcha').value = xhr.responseText;
            }
        };
        
        xhr.open('POST', 'compare.php?' + (new Date()).getTime(), true);
        xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded');
        xhr.send('captcha=' + $('captcha').value);
    }
    </script>
  </head>
  
  <body>
    <div>
      <img id="captchaImage" src="captcha.php" title="点击刷新验证码" onclick="refreshCaptcha();" />
      <p>
        <input type="text" name="captcha" id="captcha" value="请输入验证码字符，不区分大小写" onclick="this.select();" />
        <br />
        <input type="button" value="查看输入的验证码是否匹配" onclick="compareCaptcha();" />
      </p>
    </div>
  </body>
</html>